<template>
  <div class="page map-page">
    <div id="container"></div>
    <div class="address-list">
      <ul>
        <li
          v-for="(item, index) in addresses"
          :key="index"
          @click="select(item)"
        >
          <h2>{{ item.name }}</h2>
          <p>{{ item.address }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import AMap from 'AMap'
import AMapUI from 'AMapUI'
import storage from '@/utils/storage'

export default {
  name: 'Map',
  data () {
    return {
      addresses: []
    }
  },
  mounted() {
    AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
      var map = new AMap.Map('container', {
        zoom: 16,
        scrollWheel: false,
        resizeEnable: true
      })
      var positionPicker = new PositionPicker({
        mode: 'dragMap',
        map: map
      })

      positionPicker.on('success', (positionResult) => {
        console.log(positionResult)
        this.addresses = positionResult.regeocode.pois
      })
      
      positionPicker.start()
      map.panBy(0, 1)

      map.addControl(
        new AMap.ToolBar({
          liteStyle: true
        })
      )
    })
  },
  methods: {
    select (location) {
      storage.setItem('selectLocation', {
        name: location.name,
        district: location.type,
        address: location.address,
        adcode: 0,
        location: location.location
      })
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.map-page {
  @include wh(100vw, 100vh);
  @include flex(column, initial, initial)
}
#container {
  @include wh(100%, 500px);
}

.address-list {
  width: 100%;
  flex: 1;
  overflow: auto;
  ul {
    li {
      @include border1px(bottom);
      padding: 20px;
      line-height: 1.5;
      h2 {
        font-size:28px;
        color: #333;
        font-weight: none;
      }
      p {
        font-size:28px;
        color: #666;
        font-weight: none;
      }
    }
  }
}
</style>
